﻿
@{
    ViewData["Title"] = "Icons";
    Layout = "~/Areas/Admin/Views/Shared/_VueLayout.cshtml";
}
@section header{
    <style>
        .icons-container {
            margin: 10px 20px 0;
            overflow: hidden;
        }

            .icons-container .grid {
                position: relative;
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            }

            .icons-container .icon-item {
                margin: 20px;
                height: 85px;
                text-align: center;
                width: 100px;
                float: left;
                font-size: 30px;
                color: #24292e;
                cursor: pointer;
            }

                .icons-container .icon-item span {
                    display: block;
                    font-size: 16px;
                    margin-top: 10px;
                }

            .icons-container .disabled {
                pointer-events: none;
            }
    </style>

}
<div id="app">
    <div class="icons-container">
        <!-- -->
        <el-tabs type="border-card">
            <el-tab-pane label="Element-UI图标">
                <div class="grid">
                    <div v-for="item of elementIcons" :key="item" v-on:click="handleClipboard(generateElementIconCode(item),$event)">
                        <el-tooltip placement="top">
                            <div slot="content">
                                {{ generateElementIconCode(item) }}
                            </div>
                            <div class="icon-item">
                                <i :class="'el-icon-' + item"></i>
                                <span>{{ item }}</span>
                            </div>
                        </el-tooltip>

                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="Icons">
                @*<div class="grid">
                        <div v-for="item of svgIcons" :key="item" v-on:click="handleClipboard(generateIconCode(item),$event)">
                            <el-tooltip placement="top">
                                <div slot="content">
                                    {{ generateIconCode(item) }}
                                </div>
                                <div class="icon-item">
                                    <svg-icon :icon-class="item" class-name="disabled" />
                                    <span>{{ item }}</span>
                                </div>
                            </el-tooltip>
                        </div>
                    </div>*@
            </el-tab-pane>

        </el-tabs>
    </div>
</div>
@section footer{
    <script type="text/javascript" src="~/v/js/clipboard.min.js"></script>

    <script type="text/javascript" src="~/v/utils/clipboard.js"></script>

    <script type="text/javascript" src="~/v/element-ui/element-icons.js"></script>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            name: 'Icons',
            data() {
                return {
                    svgIcons: [],
                    elementIcons: elementIcons
                }
            },
            methods: {
                generateIconCode(symbol) {
                    return `<svg-icon icon-class="${symbol}" />`
                },
                generateElementIconCode(symbol) {
                    return `<i class="el-icon-${symbol}" />`
                },
                handleClipboard(text, event) {
                    clipboard(text, event)

                }
            }
        })

    </script>
}